

<!-- load ajax page -->
<?php
$items_per_group = 20;
$total_records = $post_record->row()->t_records;
$total_groups = ceil($total_records / $items_per_group);
?>
<script type="text/javascript">
    $(document).ready(function() {
        var track_load = 0; //total loaded record group(s)
        var loading = false; //to prevents multipal ajax loads
        var total_groups = <?php echo $total_groups; ?>; //total record group(s)


        $('#results').load("<?php echo site_url('index.php/welcome/load_post'); ?>", {'group_no': track_load}, function() {
            track_load++;                      // call function load post and execute code
        }); //load first group

        $(window).scroll(function() { //detect page scroll

            if ($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
            {

                if (track_load <= total_groups && loading == false) //there's more data to load
                {
                    loading = true; //prevent further ajax loading
                    $('.animation_image').show(); //show loading image

                    //load data from the server using a HTTP POST request
                    $.post('<?php echo site_url('index.php/welcome/load_post'); ?>', {'group_no': track_load}, function(data) {

                        $("#results").append(data); //append received data into the element

                        //hide loading image
                        $('.animation_image').hide(); //hide loading image once data is received

                        track_load++; //loaded group increment
                        loading = false;

                    }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                        alert(thrownError); //alert with HTTP error
                        $('.animation_image').hide(); //hide loading image
                        loading = false;

                    });

                }
            }
        });
    });
</script>

<!-- / end load ajax page -->
<section id="content">
    <!-- Docs page layout -->
    <div id="container" class="transitions-enabled infinite-scroll clearfix content-post"  style="margin-left: 0px; background: none !important; width: 100%;">
    	
        <div id="results" class="cod-md-12"  style="width: 100%;">

        </div>
    </div>
    <div class="animation_image" style="display:none" align="center"><img src="<?php echo base_url() . F_IMG; ?>ajax-loader.gif"></div>

</section>

